<template>
  <el-card class="list-page">
    <div>
      <div class="list-h">
        <i></i>
        <el-form
          :inline="true"
          class="demo-form-inline"
          :model="formSearch"
          ref="formRef"
          @submit.prevent
        >
          <el-form-item label="单据名称" prop="billNameLike">
            <el-input
              clearable
              class="width-custom120"
              v-model.trim="formSearch.billNameLike"
            ></el-input>
          </el-form-item>
          <el-form-item label="单据编号" prop="billNumLike">
            <el-input
              clearable
              class="width-custom120"
              v-model.trim="formSearch.billNumLike"
            ></el-input>
          </el-form-item>
          <el-form-item label="所属项目" prop="projectNameLike">
            <el-input
              clearable
              class="width-custom120"
              v-model.trim="formSearch.projectNameLike"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item label="所属阶段" prop="projectStage">
            <el-select
              v-model="formSearch.projectStage"
              clearable
              class="width-custom120"
            >
              <el-option>全部</el-option>
            </el-select>
          </el-form-item> -->
          <!-- <el-form-item label="创建人" prop="createUser">
            <el-input
              clearable
              class="width-custom120"
              v-model="formSearch.createUser"
            ></el-input>
          </el-form-item> -->
          <el-form-item label="单据类型" prop="billType">
            <el-select
              v-model="formSearch.billType"
              clearable
              class="width-custom120"
            >
              <el-option
                v-for="item in typeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="handleReset">重置</el-button>
            <!-- <el-button type="primary" @click="handleMainSearch">查询</el-button> -->
            <ReButton
              type="primary"
              debounce
              auto-loading
              @click="handleMainSearch"
              >查询</ReButton
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
    <el-skeleton
      style="height: calc(100vh - 300px)"
      :rows="8"
      :loading="loading"
      animated
    >
    </el-skeleton>
    <el-table
      :data="tableData"
      stripe
      style="width: 100%"
      :loading="loading"
      v-show="!loading"
      :height="'calc(100vh - 300px)'"
      :header-cell-style="{
        background: '#F7F9FD',
        color: '#000',
        height: '48px',
        borderTop: '1px soild #E4E8F2'
      }"
    >
      <template #empty>
        <el-empty :image-size="150" description="暂无数据"></el-empty>
      </template>
      <el-table-column type="index" label="序号" width="50">
        <template v-slot="scope">
          <span>{{
            (formInline.pageNum - 1) * formInline.pageSize + scope.$index + 1
          }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="billNum" label="单据编号" width="180">
        </el-table-column>
        <el-table-column prop="billName" label="单据名称"> </el-table-column>
        <el-table-column prop="billType" label="单据类型">
          <template #default="{ row }">
            {{ formatterStatusType(row) }}
          </template>
        </el-table-column>
        <el-table-column prop="projectName" label="项目名称"> </el-table-column>
        <el-table-column prop="createUserName" label="创建人">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间"> </el-table-column> -->
      <el-table-column prop="billName" label="单据名称"> </el-table-column>
      <el-table-column prop="billNum" label="单据编号"> </el-table-column>
      <el-table-column prop="projectName" label="所属项目"> </el-table-column>
      <!-- <el-table-column label="所属阶段">
          <template #default="{ row }">
            <span class="text--info">
              {{ row.projectStageName }}
            </span>
          </template>
        </el-table-column> -->
      <el-table-column prop="billType" label="单据类型">
        <template #default="{ row }">
          {{ formatterStatusType(row) }}
        </template>
      </el-table-column>
      <!-- <el-table-column prop="createUserName" label="创建人"></el-table-column> -->
      <el-table-column prop="createTime" label="创建时间"> </el-table-column>
      <el-table-column label="当前环节">
        <template #default="{ row }">
          <span class="text--info">
            {{ row.nodeStatusName }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="当前处理人">
        <template #default="{ row }">
          <span class="text--info">
            {{ row.curHandleUserName }}
          </span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template #default="{ row }">
          <el-button
            type="text"
            size="small"
            @click="handleDetail(row)"
            v-auth="`/approval/self--look`"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <re-pagination
      v-if="total > 0"
      :total="total"
      v-model:page="formInline.pageNum"
      v-model:limit="formInline.pageSize"
      @pagination="handleSearch(formInline.pageNum)"
    />
  </el-card>
</template>

<script lang="ts">
import { reactive, ref, defineComponent } from "vue";
import {
  BillStatusEnum,
  FlowStatusEnum,
  BillStatusMap,
  equipType
} from "../types";
import ReButton from "/@/components/ReButton/index.vue";
import { useRouter } from "vue-router";
import { postArvAccList } from "/@/api/acceptance";
import { storageLocal } from "/@/utils/storage";
import RePagination from "/@/components/RePagination/index.vue";

export default defineComponent({
  components: { ReButton, RePagination },
  setup() {
    const formRef = ref<HTMLFormElement | null>(null) as any;
    const info = storageLocal.getItem("info");
    let formSearch = reactive({
      billNameLike: "",
      billNumLike: "",
      projectNameLike: "",
      billType: "",
      createUser: info ? info?.userId : ""
    });
    const router = useRouter();
    let loading = ref<boolean>(false);
    let tableData = ref([]);
    let total = ref<number>(0);
    let formInline = reactive({
      pageNum: 1,
      pageSize: 10
    });

    // 初始状态
    let activeName = ref<string>("All");
    let activeNum = ref<number>(0);

    const typeList = BillStatusEnum;

    const getTableData = async (obj: Object = {}) => {
      loading.value = true;
      const { code, data } = await postArvAccList(
        Object.assign(formSearch, obj)
      );
      loading.value = false;
      if (code === 200) {
        tableData.value = data.list;
        total.value = data.rows;
      }
    };

    getTableData(formInline);

    const handleReset = (): void => {
      formRef.value.resetFields();
    };

    const handleSearch = (page?) => {
      formInline.pageNum = page || 1;
      getTableData(formInline);
    };

    const handleMainSearch = done => {
      handleSearch();
      setTimeout(() => {
        done();
      }, 1000);
    };

    const handleDetail = row => {
      const {
        nodeId,
        instanceId,
        flowId,
        preNodeId,
        billType,
        flowBaseId,
        id,
        billNum = ""
      } = row;
      let pathUrl = "/projectsA/acceptance/arrival/detail";
      let pathQuery = {
        mode: "read",
        contractId: id,
        nodeDefId: instanceId ? nodeId.toUpperCase() : "ACT_010",
        instanceId,
        flowId,
        source: "self",
        back: "self",
        preNodeId,
        billNum,
        flowType: billType
      };

      if (billType && ["5", "6"].includes(billType)) {
        pathUrl = "/projectsA/acceptance/concealed/detail";
        pathQuery = Object.assign(pathQuery, {
          flowMinType: billType,
          contractId: flowBaseId
        });
      } else if (billType && ["7", "8"].includes(billType)) {
        pathUrl = "/projectsA/acceptance/completed/detail";
        pathQuery = Object.assign(pathQuery, {
          flowMinType: billType,
          contractId: flowBaseId
        });
      } else if (billType && ["9", "10"].includes(billType)) {
        pathUrl = "/projectsA/acceptance/material/detail";
        pathQuery = Object.assign(pathQuery, {
          flowMinType: billType,
          contractId: flowBaseId
        });
      } else if (billType && ["11", "15"].includes(billType)) {
        pathUrl = "/projectsA/quality/inspection/detail";
        pathQuery = Object.assign(pathQuery, {
          flowMinType: billType,
          contractId: flowBaseId
        });
      } else if (
        billType &&
        ["1001", "1002", "1003", "1004"].includes(billType)
      ) {
        pathUrl = "/approval/detail";
        pathQuery = Object.assign(pathQuery, {
          taskId: row.taskId,
          contractId: flowBaseId
        });
      } else if (billType && equipType.includes(billType)) {
        pathUrl = "/approval/detail";
        pathQuery = Object.assign(pathQuery, {
          taskId: row.taskId,
          contractId: flowBaseId
        });
      } else if (billType && ["1015"].includes(billType)) {
        pathUrl = "/approval/construction";
        pathQuery = Object.assign(pathQuery, {
          taskId: row.taskId,
          contractId: flowBaseId,
          billName: row.billName,
          flowType: row.billType
        });
      }
      switch (billType) {
        case "1016":
        case "1017":
          pathUrl = "/approval/detail";
          pathQuery = Object.assign(pathQuery, {
            taskId: row.taskId,
            contractId: flowBaseId,
            billName: row.billName,
            flowType: row.billType,
            module: "material"
          });
          break;
        case "1018":
        case "1019":
          // 隐蔽验收
          pathUrl = "/approval/detail";
          pathQuery = Object.assign(pathQuery, {
            taskId: row.taskId,
            contractId: flowBaseId,
            billName: row.billName,
            flowType: row.billType,
            module: "conceal"
          });
          break;
        case "1020":
        case "1021":
          // 施工试验&见证检测
          pathUrl = "/approval/detail";
          pathQuery = Object.assign(pathQuery, {
            taskId: row.taskId,
            contractId: flowBaseId,
            billName: row.billName,
            flowType: row.billType,
            module: "witness"
          });
          break;
        case "1022":
          // 其他问题（随手拍）
          pathUrl = "/approval/detail";
          pathQuery = Object.assign(pathQuery, {
            taskId: row.taskId,
            contractId: flowBaseId,
            billName: row.billName,
            flowType: row.billType,
            module: "snap"
          });
          break;
        case "1032":
          // 车辆出入
          pathUrl = "/approval/detail";
          pathQuery = Object.assign(pathQuery, {
            taskId: row.taskId,
            contractId: flowBaseId,
            billName: row.billName,
            flowType: row.billType,
            module: "vehicle"
          });
          break;
        case "1030":
          // 安全文明
          pathUrl = "/approval/construction";
          pathQuery = Object.assign(pathQuery, {
            taskId: row.taskId,
            contractId: flowBaseId,
            billName: row.billName,
            flowType: row.billType,
            module: "civiliz"
          });
          break;
        default:
          break;
      }
      if (
        Number(billType) >= 1031 &&
        Number(billType) <= 1148 &&
        Number(billType) !== 1032
      ) {
        pathUrl = "/approval/detail";
        pathQuery = Object.assign(pathQuery, {
          taskId: row.taskId,
          contractId: flowBaseId,
          billName: row.billName,
          flowType: row.billType,
          module: Number(billType) == 1031 ? "inspection" : ""
        });
      }
      router.replace({
        path: pathUrl,
        query: pathQuery
      });
    };

    // 格式化状态
    const formatterStatusLabel = row => {
      return row?.flowStatus && FlowStatusEnum[row.flowStatus].label;
    };

    // 格式化类型
    const formatterStatusType = row => {
      return row?.billType && BillStatusMap.get(row.billType);
    };

    const formatterStatusColor = row => {
      return {
        redColor: row?.flowStatus === 0,
        greenColor: row?.flowStatus === 1,
        grayColor: row?.flowStatus === 2
      };
    };

    return {
      formRef,
      formSearch,
      activeName,
      activeNum,
      typeList,
      total,
      formInline,
      loading,
      tableData,
      handleReset,
      handleMainSearch,
      handleDetail,
      handleSearch,
      formatterStatusLabel,
      formatterStatusType,
      formatterStatusColor
    };
  }
});
</script>

<style lang="scss" scoped></style>
